<template>
    <div id="login">
        <div class="header">
            <mt-header fiexd title="您还没登陆呢"></mt-header>
        </div>
		
       <div class="content">
            <div class="userImg">
                <img v-if="headerImg" :src="headerImg">
                <img v-else src="../lib/img/tou.jpg">
            </div>
        <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
        <mt-field label="密码" type="password" placeholder="请输入密码" v-model="paw"></mt-field>

        <div class="login-btn">
            <mt-button type="primary" size="large" @click="logonHandle">登陆</mt-button>
        </div>
        
        <div class="login-tab">
            <a class="login-to-register" @click="toRegister">注册账号</a>
            <span>|</span>
            <a class="login-forget-paw">忘记密码</a>
        </div>
       </div>
    </div>
</template>
<script>

import axios from 'axios'
import {mapMutations} from 'vuex'
        

export default {
    data(){
        return {
            username: '',
            paw: '',
            headerImg: ''
        }
    },
    methods:{
        
        //获取vuex状态的公共方法
        ...mapMutations([
            "setState",
            "toastInfo"
        ]),
        
        logonHandle(){
            const {username, paw} = this._data

            if(!username){
                this.toastInfo('用户名为空')
                return
            }else if(!paw){
                this.toastInfo('密码为空')
                return
            }

            axios({
                method: 'get',
                url: 'http://localhost:3003/login',
                params: {
                    username,
                    paw
                }
            })
            .then((res) =>{
                const code  = res.data.code

                if(code === -1){
                    this.toastInfo('用户名不存在')
                    return
                }else if(code === 0){
                    this.toastInfo('密码错误')
                    return
                }

                const {username, paw, headerImg} = res.data.userData

                //把这些信息放到 store状态里面 最好不要再这里 直接修改
                this.setState(res.data.userData)
               
                this.headerImg = headerImg
                sessionStorage.removeItem('state')

            })
        },

        //前往登陆
        toRegister(){
          
            this.setState({count: 'register'})
        }
    }
}
</script>
<style lang="less" scoped>
#login{

    .login-header{
        margin: 20% 0 20px 25%;
        width: 50%;
        border-radius: 50%;
    }

    .login-tab{
        margin: 20px 0;
        text-align: center;
        a{
            font-size: 20px;
            padding: 0 15px;
            color: #26A2FF;
        }
        span{
            color: #BDBDBD;
        }
    }

     .login-btn{
        margin: 20px 0;
    }

}


</style>

